<template>
	<div class="menu">
		<el-col
			:span="12"
			class="menusList"
		>
			<div class="title-text-container">
				<img
					src="~@/assets/imgs/login/logo.png"
					alt=""
				/>
				校园好物租凭系统
			</div>
			<el-menu
				ref="menus"
				:default-active="$route.path"
				class="el-menu-vertical-demo"
				background-color="#000c17"
				text-color="#9da1a6"
				active-text-color="#fff"
				router
			>
				<vue-scroll :ops="scollOptions">
					<el-submenu
						v-for="(item, index) in menu"
						:key="index.name"
						:index="index + ''"
					>
						<template slot="title">
							<img :src="iconArr[item.img]" />
							<span>{{ item.meta.title }}</span>
						</template>
						<el-menu-item-group
							v-for="(child, i) in item.children"
							:key="i"
							v-show="child.meta.title != '上线审核'"
						>
							<el-menu-item
								:index="child.__full_path__"
								@click="selectMenu(index)"
							>
								{{ child.meta.title }}
							</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</vue-scroll>
			</el-menu>
		</el-col>
	</div>
</template>

<script>
	import { titleheight, realHeight } from "@/config/frame";
	import { mapState, mapActions } from "vuex";
	import one from "@/assets/imgs/icon/accessIcon.png";
	import two from "@/assets/imgs/icon/toolIcon.png";
	import three from "@/assets/imgs/icon/serveIcon.png";
	import four from "@/assets/imgs/icon/docIcon.png";
	export default {
		name: "SideMenu",

		props: {
			menu: {
				type: Array,
				default: () => [],
			},
		},

		data() {
			return {
				/**
				 * 滚动条
				 */
				scollOptions: {
					scrollPanel: {
						scrollingX: false,
						scrollingY: true,
					},
					vuescroll: {
						mode: "native",
						sizeStrategy: "percent",
						detectResize: true,
						zooming: false,
					},
					bar: {
						onlyShowBarOnScroll: false,
						background: "#999999",
						opacity: 0,
					},
				},
				iconArr: [one, two, three, four],
				activeIndex: "",
				selectIndex: 0,
			};
		},
		computed: {
			// matchRouter () {
			//   const router = this.$route.matched[2]
			//   return router ? router.path.split('/')[router.path.split('/').length - 1] : ''
			// },
			...mapState({
				titleheight: (state) => state.frame.titleheight + "px",
			}),
		},
		watch: {
			$route(to, from) {
				this.getMenuIndex();
			},
		},
		mounted() {
			this.choiceMenu();
			this.getMenuIndex();
		},

		methods: {
			choiceMenu() {
				let index = window.localStorage.getItem("key");
				index = index ? index : 0;
				// this.$refs.menus.open(index);
			},
			selectMenu(id) {
				window.localStorage.setItem("key", id);
			},
			/**
			 * 获取菜单index
			 */
			getMenuIndex() {
				let selectIndex = 0;
				this.menu.forEach((route, index) => {
					if (
						this.$route.matched[1] &&
						this.$route.matched[1].path.indexOf(route.path) !== -1
					) {
						selectIndex = index;
					}
				});
				this.selectIndex = selectIndex;
			},
			// /**
			//  * 路由跳转
			//  */
			// gotoUrl (data, hideSubMenu) {
			//   if (this.matchRouter === data.path) {
			//     return
			//   }
			//   this.activeIndex = ''
			//   this.$emit('gotoUrl', data)
			// },
		},
	};
</script>

<style lang="scss" scoped>
	.menu {
		overflow: visible;
		/deep/ .el-submenu__title {
			background-color: #001529 !important;
			img {
				width: 18px;
				margin-right: 10px;
				vertical-align: middle;
			}
		}
		.carIcon {
			margin-right: 10px;
		}
		.el-col-12 {
			width: 100%;
			height: 100%;
			.title-text-container {
				img {
					width: 22px;
					margin-right: 10px;
				}
				display: flex;
				height: 8%;
				align-items: center;
				justify-content: center;
				background-color: #00284d;
				color: #ffffff;
			}
			.el-menu {
				height: 92%;
				// height: calc(100% - 60px);
				// height:-moz-calc(100% - 60px);
				// height:-webkit-calc(100% - 60px);
				border: none;
				overflow: auto;
			}
			/deep/ .el-menu-item.is-active {
				background-color: #1890ff !important;
			}
		}
		.icon-container {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 26px;
			width: 34px;
			background: #1c242e;
			cursor: pointer;
			.icon-arrow-up {
				width: 16px;
				height: 9px;
				background: url(~@/assets/imgs/icon/icon-arrow-up.png) no-repeat;
				background-size: 100%;
			}
		}
	}

	.submenu {
		position: relative;
		margin-left: 50px;
		flex: 0 0 auto;
		text-align: center;
		cursor: pointer;
		&:hover {
			color: #3d98e4;
		}
		&.active {
			color: #3d98e4;
		}

		.list-container {
			position: absolute;
			top: 0;
			font-size: 16px;
			left: 50%;
			width: 152px;
			margin-left: -76px;
			padding-top: 50px;
			&.showList {
				display: block;
				overflow: visible;
			}
			&.hideList {
				display: none;
				height: 0px;
				overflow: hidden;
			}
		}

		ul {
			position: relative;
			width: 100%;
			color: #c4d2ff;
			background: #11171f;
			box-shadow: 0 0 20px #6f87aa;
			border-radius: 10px;
			padding: 26px 0 14px 0;
			&::before {
				display: block;
				position: absolute;
				top: 0px;
				left: 0;
				height: 20px;
				width: 100%;
				content: "";
				background: #11171f;
				z-index: 10;
				border-radius: 10px;
			}
			&::after {
				display: block;
				position: absolute;
				top: -7.07px;
				left: 50%;
				margin-left: -9.07px;
				height: 14.14px;
				width: 14.14px;
				content: "";
				background: #11171f;
				transform: rotate(45deg);
				box-shadow: 0 0 20px #6f87aa;
				z-index: 9;
			}
			li {
				padding: 0;
				height: 30px;
				line-height: 30px;
				text-align: center;
				box-sizing: border-box;
				white-space: nowrap;
				margin-bottom: 12px;
				cursor: pointer;
				overflow: visible;
				&:hover {
					color: #ffffff;
					background-image: linear-gradient(
						to right,
						#11171f 3%,
						#388bcf 43%,
						#388bcf 63%,
						#11171f 97%
					);
				}
				&.isCurrentRoute {
					color: #ffffff;
					background-image: linear-gradient(
						to right,
						#11171f 3%,
						#388bcf 43%,
						#388bcf 63%,
						#11171f 97%
					);
				}
				&.hideLi {
					display: none;
				}
			}
		}
	}
</style>
